<!--
*@Author: QWP
*@Description: 危化预警报警信息的详情
*@Date 2024-10-25 15:18
-->
<template>
  <u-dialog v-bind="$attrs"
    :hideBtns="['submit']">
    <template #title>
      <b style="font-size: .3rem;">{{ current['orgName'] }}</b>
    </template>
    <a-layout class="f-h-100">
      <a-layout-content style="overflow: auto;">
        <a-collapse v-model:activeKey="activeKey"
          :bordered="false"
          @change="collapseChange">
          <a-collapse-panel v-for="item in (current['triskCauseItemList'])" 
            :id="item.warningId" 
            :key="item.warningId" 
            :style="customStyle">
            <template #header>
              <b style="font-size: 16px; color: #1890ff">{{ item.name }}</b>
            </template>
            <u-table :columns="columns" 
              :data="item['riskDetailList'] || []"
              :rowSelection="null"
              :pagination="false"
              :scroll="{ y: '300px' }">
            </u-table>
          </a-collapse-panel>
        </a-collapse>
      </a-layout-content>
    </a-layout>
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, watch, useAttrs } from 'vue' 
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import { TableColumnProps } from "ant-design-vue";
import dayjs from 'dayjs'

const attrs = useAttrs()
const props = defineProps<{
  current: any
}>()

const activeKey = ref<any[]>([])
const customStyle = 'background: #fff; border-radius: 4px; margin-bottom: 24px;border: 0;';

let columns: Array<TableColumnProps> = reactive([
  { dataIndex: "ROW_ID", title: "序号", width: 50, align: 'center',
    customRender: ({ index }) => index += 1
  },
  { dataIndex: "score", title: "编号", width: 150, align: 'center',},
  { dataIndex: "type", title: "类型", width: 150, align: 'center',},
  { dataIndex: "weight", title: "重量", width: 150, align: 'center',},
  { dataIndex: "warnDate", title: "时间", width: 150, align: 'center',
    customRender: ({ text }) => text ? dayjs(text).format('YYYY-MM-DD') : ''
  },
  { dataIndex: "description", title: "描述 ", minWidth: 150 },
]);

watch(() => attrs.open, (nval, oval) => {
  if(nval == true) {
    activeKey.value = (props.current['triskCauseItemList'] || []).map(i => i.warningId)
  }
}, { immediate: true })

</script>

<style lang='scss' >
</style>